<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8">
<![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"><!--<![endif]-->
    <h:head>
        <title>SGSMCAN</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <h:outputStylesheet  name="css/bootstrap.css" />
        <h:outputStylesheet  name="css/style.css" />
        <h:outputStylesheet  name="css/prime.css" />
        <h:outputStylesheet  name="css/panel.css" />
        <h:outputStylesheet  name="css/notifIt.css" />
        <f:loadBundle basename="config" var="con_bundle" />
    </h:head>
    <h:body id="pagina" onload="not1(#{usuarioBean.activar},#{usuarioBean.nro_notificaciones});">
        <div id="header"> 
            <div id="logo">
                <h:link outcome="home">
                    <h:graphicImage id="logo1" value="/resources/image/top.png" style="width: 100%; height: 100%;" />
                </h:link>                
            </div>
        </div>

        <div id="main">
            <div id="sidebar">
                <div class='content'>
                    <h:form id="menufrm">
                        <p:menu style="width: 100%;">  
                            <p:submenu label="Menu del Sistema"  style="text-align: center;">  

                            </p:submenu>
                        </p:menu></h:form>
                    <h:form style="width: 100%;" styleClass="h3" >
                        <p:panelMenu >
                            <p:submenu label="Seguridad" style="appearance: menu-item">
                                <c:forEach items="#{usuarioBean.modulos}" var="child" end="1">
                                    <p:menuitem value="#{child.modulo.nombre}" rendered="#{child.listar eq true}" outcome="#{child.modulo.url}" />

                                </c:forEach>
                            </p:submenu>
                            <p:submenu label="Canes" style="appearance: menu-item">

                                <c:forEach items="#{usuarioBean.modulos}" var="child" begin="2" end="5" >
                                    <p:menuitem value="#{child.modulo.nombre}" rendered="#{child.listar eq true}" outcome="#{child.modulo.url}" />

                                </c:forEach>

                            </p:submenu>

                            <p:submenu label="Serenos" style="appearance: menu-item">

                                <c:forEach items="#{usuarioBean.modulos}" var="child" begin="6" end="6" >
                                    <p:menuitem value="#{child.modulo.nombre}" rendered="#{child.listar eq true}" outcome="#{child.modulo.url}" />
                                </c:forEach>
                            </p:submenu>
                            <p:submenu label="Eventos" style="appearance: menu-item">

                                <c:forEach items="#{usuarioBean.modulos}" var="child" begin="7"  end="8">
                                    <p:menuitem value="#{child.modulo.nombre}" rendered="#{child.listar eq true}" outcome="#{child.modulo.url}" />

                                </c:forEach>

                            </p:submenu>

                            <p:submenu label="Inventarios" style="appearance: menu-item">

                                <c:forEach items="#{usuarioBean.modulos}" var="child" begin="9">
                                    <p:menuitem value="#{child.modulo.nombre}" rendered="#{child.listar eq true}" outcome="#{child.modulo.url}" />

                                </c:forEach>

                            </p:submenu>
                        </p:panelMenu>
                    </h:form>
                    <h:form>
                        <br />
                        <h:commandLink id="sali" action="#{loginBean.logout}" value="Salir" />
                    </h:form>
                </div>

            </div>
            <div id="article">
                <div class='content'>
                    <ui:insert name="content">
                        <h:graphicImage id="logo2" value="/resources/image/front1.png" width="100%"/>
                    </ui:insert>
                </div>
            </div>

        </div>
        <p:dialog id="dlg" widgetVar="dlgo" resizable="false" header="Eventos" width="500" modal="true" position="center center">
            <f:ajax event="close" listener="#{usuarioBean.handleClose}"  />
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Evento</th>
                            <th>Fecha Evento</th>
                        </tr>
                    </thead>
                    <ui:repeat value="#{usuarioBean.alarmas}" var="alar" varStatus="myVar" >
                        <h:panelGroup rendered="#{myVar.index % 2 eq 1}">
                            <tr class="active"  >
                                <td class="active" >#{myVar.index + 1}</td>
                                <td class="active" >#{alar.evento.nombre}</td>
                                <td class="active" >#{alar.fechaFormato}</td>
                            </tr>
                        </h:panelGroup>
                        <h:panelGroup rendered="#{myVar.index % 2 eq 0}">
                            <tr  style="background-color: yellowgreen;" >
                                <td >#{myVar.index + 1}</td>
                                <td >#{alar.evento.nombre}</td>
                                <td >#{alar.fechaFormato}

                                </td>
                            </tr>
                        </h:panelGroup>


                    </ui:repeat>

                </table>
            </div>


        </p:dialog>
        <div id="footer">
            <a href="http://www.munlima.gob.pe/ciudad" >
                <h:graphicImage value="/resources/image/municipalidad.png" style="width: 13%; height: 10%; " />
            </a>
            <p:spacer width="100" height="10" />
            <a href="http://seguridadciudadana.munlima.gob.pe/" >
                <h:graphicImage value="/resources/image/serenazgo.png" style="width: 7%; height: 7%; " />
            </a>
        </div>
        <h:outputScript library="primefaces" name="jquery/jquery.js" />
        <h:outputScript name="js/bootstrap.min.js"></h:outputScript>
        <h:outputScript name="js/notifIt.js"></h:outputScript>
        <h:outputScript name="js/calendar.js"></h:outputScript>
        <script>
            function not1(parameter, parameter2) {
                var not;
                if (parameter == true) {
                    if (parameter2 == 1) {
                        not = "notificación";
                    } else {
                        not = "notificaciones";
                    }
                    notif({
                        msg: "Tiene " + parameter2 + " " + not,
                        type: "success"
                    });
                }
            }

        </script>
    </h:body>
</html>

